import React from 'react';
import { useChatContext } from '../contexts/ChatContext';
import ChatContainer from '../components/ChatContainer';
import MultiModalInput from '../components/MultiModalInput';
import FunctionButtons from '../components/FunctionButtons';
import { useStreamResponse } from '../hooks/useStreamResponse';
import ModelSelector from '../components/ModelSelector';

const Chat = () => {
  const { state } = useChatContext();
  const { sendMessageWithStream, cancelStream, isStreaming } = useStreamResponse();

  const handleSubmit = (message) => {
    if (isStreaming) {
      cancelStream();
      return;
    }

    sendMessageWithStream(message);
  };

  return (
    <div className="flex flex-col h-full">
      <div className="py-2 px-4 bg-white border-b flex items-center justify-between">
        <ModelSelector />
        <div className="flex space-x-2">
          <button className="p-2 text-gray-500 hover:text-gray-700">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16l-4-4m0 0l4-4m-4 4h18" />
            </svg>
          </button>
          <button className="p-2 text-gray-500 hover:text-gray-700">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </button>
        </div>
      </div>

      <ChatContainer
        messages={state.messages}
        loading={state.isLoading}
      />

      <FunctionButtons />

      <MultiModalInput onSubmit={handleSubmit} />
    </div>
  );
};

export default Chat;